<!-- 网站信息 -->
<template>
    <div class="website-information">
        <el-form ref="formRef" :rules="rules" class="ls-form" :model="formData" label-width="120px">
            <el-card shadow="never" class="!border-none">
                <div class="text-xl font-medium mb-[20px]">后台设置</div>

                <div v-for="(item,index) in list" :key="index" class="mb-[40px]">
                    <div class="flex">
                        <el-form-item label="参数名称">
                            <el-input v-model="item.name" />
                        </el-form-item>
                        <el-form-item label="参数键名">
                            <el-input v-model="item.key" :disabled="!item.del" />
                        </el-form-item>
                        <el-form-item label="参数类型"> 
                            <el-select
                                v-model="item.type"
                                placeholder="Select"
                                >
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value"
                                />
                                </el-select>
                        </el-form-item>
                        <el-button  :icon="Delete"  type="danger" plain v-if="item.del" @click="handledel(index)" class="ml-[20px]">删除</el-button>
                    </div>
                    <el-form-item label="参数键值">
                        <el-input v-model="item.value" class="!w-[502px]" v-if="item.type == 'text'" /> 
                        <uploadimg v-model="item.value" v-if="item.type == 'image'"/> 
                    </el-form-item>
                </div>

                
            </el-card>
    
            
        </el-form>
        <footer-btns v-perms="['setting/edit']">
            <el-button @click="handleAdd">增加</el-button>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </footer-btns>
    </div>
</template>

<script setup name="webInformation">
import { Delete } from '@element-plus/icons-vue'
import { save, getAllDetail } from '@/apis/system/config'
import { useAppStore } from '@/stores/app' 
import feedback from '@/utils/feedback'
const formRef = ref() 
const appStore = useAppStore()

const handleAdd = () => {
    list.value.push({
        name:'',
        key:'',
        value:'',
        type:'text',
        sort: 0,
        status: 1,
        del:true
    })
}

const handledel = index => {
    list.value.splice(index,1)
}

const typeList = ref([{
    name:'文字',
    value:'text',
},{
    name:'图片',
    value:'image'
}])

const list = ref([{
    name:'',
    key:'',
    value:'',
    type:'text'
}]) 

// 获取备案信息
const getData = async () => {
    const data = await getAllDetail()  
    list.value = data
}

// 设置备案信息
const handleSubmit = async () => { 
    await save(list.value)
    appStore.getConfigData()
    getData()
    feedback.msgSuccess('更新成功');
}

onMounted(() => { 
    getData()
})


</script>

<style lang="scss" scoped></style>
